<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Inula Loading...</title>
    <style data-basic>
      body {
        font-family: sans-serif;
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      #loading {
        position: relative;
        padding-left: 96px;
        padding-top: 12px;
      }
      @keyframes trapezoidAnimation {
        0% {
          transform: translateY(0) scaleX(1);
        }
        25% {
          transform: translateY(-5px) scaleX(0.75);
        }
        50% {
          transform: translateY(-15px) scaleX(0.5);
        }
        70% {
          transform: translateY(-25px) scaleX(0.25);
        }
        100% {
          transform: translateY(-40px) scaleX(0);
        }
      }
      .triangle {
        left: -7px;
        top: 3px;
        width: 0;
        height: 0;
        border-left: 43px solid transparent;
        border-right: 43px solid transparent;
        border-top: 58px solid white;
        border-bottom: 10px solid transparent;
        position: absolute;
        animation: trapezoidAnimation 2s infinite;
        transform-origin: top;
      }

      #loading::before {
        position: absolute;
        left: -12px;
        top: 11%;
        content: '';
        display: inline-block;
        width: 101px;
        height: 101px;
        background-size: cover;
        /* animation: spin 2s linear infinite; */
        background-image: url('');
      }

      #loading h3 {
        margin: 0 0 2px;
        color: #666;
        font-size: 20px;
        font-weight: normal;
      }

      #loading small {
        color: #888;
        font-size: 12px;
      }

      #loading small::after {
        content: 'from source';
      }

      #loading p {
        box-sizing: border-box;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: #333;
      }

      #loading p:empty {
        display: none;
      }

      #loading p span {
        font-family: sans-serif;
        padding: 0 6px 0 2px;
        color: #666;
        font-size: 14px;
        vertical-align: bottom;
      }

      #loading p.summary {
        margin: 8px 0;
        height: 28px;
        font-size: 24px;
      }

      #loading p.detail {
        margin: 2px 0;
        height: 40px;
        font-size: 16px;
      }

      code.progress-details {
        margin-top: 20px;
        font-size: 13px;
        color: #999999;
        max-width: 80%;
        text-align: center;
        white-space: pre-wrap;
      }

      @keyframes fade-in-out {
        0% {
          opacity: 0.4;
        }

        100% {
          opacity: 1;
        }
      }
    </style>
    <style data-mfsu>
      #loading[data-mfsu]::after {
        position: absolute;
        top: 0;
        left: 64px;
        content: '';
        width: 20px;
        height: 22px;
        background: center / 20px 22px;
        background-image: url('');
        animation: fade-in-out alternate infinite 1s;
      }

      #loading[data-mfsu] small::after {
        content: 'Umi with MFSU';
      }

      #loading[data-mfsu]:hover p.summary,
      #loading[data-mfsu]:not(:hover) p.detail {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="loading">
      <div class="triangle"></div>
      <h3>编译中...</h3>
      <small></small>
      <p class="summary"></p>
      <p class="detail"></p>
    </div>
    <code class="progress-details"></code>
    <script>
      const loading = document.getElementById('loading');
      const progressDetails = document.querySelector('.progress-details');
      const summary = loading.querySelector('.summary');
      const detail = loading.querySelector('.detail');

      function check(data) {
        renderStatus(data);
        if (
          data.bundleStatus.done &&
          (!data.mfsuBundleStatus || data.mfsuBundleStatus.done)
        ) {
          location.reload();
        } else {
          setTimeout(loadData, 300);
        }
      }

      function renderStatus(data) {
        const hasMFSU = Boolean(data.mfsuBundleStatus);
        const hasProgressDetails = Boolean(
          data.bundleStatus.progresses[0].details,
        );

        if (hasProgressDetails) {
          const details = data.bundleStatus.progresses[0].details;
          if (details.length) {
            progressDetails.innerHTML = details.join('<br />');
          }
        }

        const srcPercent = Math.floor(
          (data.bundleStatus.done
            ? 1
            : data.bundleStatus.progresses[0].percent || 0) * 100,
        );
        const mfsuPrecent =
          hasMFSU &&
          Math.floor(
            (data.mfsuBundleStatus.done
              ? 1
              : data.mfsuBundleStatus.percent || 0) * 100,
          );
        const totalPercent = hasMFSU
          ? Math.floor((srcPercent + mfsuPrecent) / 2)
          : srcPercent;
        const summaryText = totalPercent + '<span>%</span>';
        let detailText = summaryText;

        if (hasMFSU) {
          loading.setAttribute('data-mfsu', '');
          detailText = [
            srcPercent + '<span>% for src</span>',
            '<br />',
            mfsuPrecent + '<span>% for deps</span>',
          ].join('\n');
          detail.innerHTML = detailText;
        }

        loading.setAttribute('data-percent', totalPercent);
        summary.innerHTML = summaryText;
      }

      function loadData() {
        fetch('/__umi/api/bundle-status')
          .then((res) => res.json())
          .then(check);
      }

      loadData();
    </script>
  </body>
</html>
